<template>
	<el-form ref="formObj" :model="props.formData" :rules="rules" label-width="80px">
		<el-form-item label="食品名称" prop="name">
			<el-input v-model="props.formData.name" placeholder="请输入食品名称" />
		</el-form-item>
		<el-form-item label="食品类别" prop="type">
			<el-select-v2
				v-model="props.formData.type"
				:options="api.typeList"
				placeholder="请选择菜品类别"></el-select-v2>
		</el-form-item>
		<el-form-item label="单价" prop="price">
			<el-input v-model="props.formData.price" placeholder="请输入食品单价"></el-input>
		</el-form-item>
		<el-form-item label="是否清真" prop="isHalal">
			<el-radio-group v-model="props.formData.isHalal">
				<el-radio :value="0">否</el-radio>
				<el-radio :value="1">是</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="食品图片" prop="file">
			<div class="upload">
				<el-upload
					action="#"
					list-type="picture-card"
					:auto-upload="false"
					:limit="1"
					v-model:file-list="props.fileList"
					:on-change="changeImg"
					:on-remove="removeImg">
					<el-icon>
						<PictureFilled />
					</el-icon>
				</el-upload>
			</div>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="props.save">保存</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup>
import { ref } from 'vue'
import api from '@/api/foodapi'
import { PictureFilled } from '@element-plus/icons-vue'
const props = defineProps(['formData', 'rules', 'save', 'fileList'])
const formObj = ref()
function changeImg(uploadFile) {
	props.formData.file = uploadFile.raw
}
function removeImg() {
	props.formData.file = null
}
defineExpose({
	formObj
})
</script>

<style scoped lang="scss">
.upload {
	width: 150px;
	height: 150px;
	overflow: hidden;
}
</style>